@extends('admin.layouts.app')
@section('title', '卡片 Card')
@section("js-head")
    <link rel="stylesheet" type="text/css" href="{{ asset('/static/css/packages/loading.css') }}" />
    <script src="{{ asset('/static/js/libs/core/packages/loading.js') }}"></script>
@endsection
@section("content")
<div class="app-main demo">
        <div class="row">
            <div class="col-12">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>基础用法</h4>
                    </div>
                    <div class="app-card-content">
                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>示例</li>
                                            <li>卡片的标记和样式尽可能少，但仍能提供大量控制和自定义功能。它们与flexbox一起构建，可以轻松对齐并与其他Bootstrap组件很好地混合。它们margin默认情况下没有，因此请根据需要使用空格实用程序。

                                                以下是具有混合内容和固定宽度的基本卡的示例。卡没有固定的宽度开始，因此它们自然会填满其父元素的整个宽度。通过我们的各种尺寸选择，可以轻松自定义此尺寸。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                    <a href="#" class="btn btn-primary">去某地</a>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>标题，文本和链接</li>
                                            <li>卡片标题通过添加.card-title到<h*>标签来使用。以相同的方式，通过添加.card-link到<a>标签来添加链接并将链接彼此相邻放置。

                                                    字幕通过.card-subtitle在<h*>标签中添加来使用。如果将.card-title和.card-subtitle项目放在一个.card-body项目中，则卡片标题和副标题会很好地对齐。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">卡片标题</h5>
                    <h6 class="card-subtitle mb-2 text-muted">卡片子标题</h6>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                    <a href="#" class="card-link">链接</a>
                    <a href="#" class="card-link">另一个链接</a>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>


                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>图片</li>
                                            <li>.card-img-top将图像放置在卡的顶部。使用.card-text，可以将文本添加到卡中。其中的文本.card-text也可以使用标准HTML标记设置样式。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>


                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>清单群组</li>
                                            <li>在带有刷新列表组的卡中创建内容列表。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">明天只是讨厌</li>
                    <li class="list-group-item">蛋白质和抗氧化剂</li>
                    <li class="list-group-item">制造色情</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <div class="card-header">
                    精选
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">明天只是讨厌</li>
                    <li class="list-group-item">蛋白质和抗氧化剂</li>
                    <li class="list-group-item">制造色情</li>
                </ul>
            </div>
        </div>
    </div>
</div>

                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>厨房水槽</li>
                                            <li>混合并匹配多种内容类型以创建所需的卡，或将所有内容丢在其中。下面显示的是图像样式，块，文本样式和列表组，它们都包裹在定宽卡中。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">明天只是讨厌</li>
                    <li class="list-group-item">蛋白质和抗氧化剂</li>
                    <li class="list-group-item">制造色情</li>
                </ul>
                <div class="card-body">
                    <a href="#" class="card-link">卡链接</a>
                    <a href="#" class="card-link">另一个链接</a>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>页眉和页脚</li>
                                            <li>在卡中添加可选的页眉和/或页脚。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    精选
                </div>
                <div class="card-body">
                    <h5 class="card-title">特殊标题处理</h5>
                    <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                    <a href="#" class="btn btn-primary">去某地</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card">
                <h5 class="card-header">
                    精选
                </h5>
                <div class="card-body">
                    <h5 class="card-title">特殊标题处理</h5>
                    <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                    <a href="#" class="btn btn-primary">去某地</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    引用
                </div>
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <p>Lorem ipsum dolor坐下来，一直保持良好的状态。整体从正面布置。</p>
                        <footer class="blockquote-footer">著名的人<cite title="Source Title">来源标题中</cite></footer>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card text-center">
                <div class="card-header">
                    精选
                </div>
                <div class="card-body">
                    <h5 class="card-title">特殊标题处理</h5>
                    <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                    <a href="#" class="btn btn-primary">去某地</a>
                </div>
                <div class="card-footer text-muted">
                    2天前
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>尺寸</li>
                                            <li>卡片没有具体规定width，因此除非另有说明，否则卡片的宽度为100％。您可以根据需要使用自定义CSS，网格类，网格Sass mixins或实用程序来更改此设置。
                                            </li>
                                            <li>使用网格标记</li>
                                            <li>使用网格，根据需要将卡包装在列和行中。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">特殊标题处理</h5>
                            <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                            <a href="#" class="btn btn-primary">去某地</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">特殊标题处理</h5>
                            <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                            <a href="#" class="btn btn-primary">去某地</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>使用实用程序</li>
                                            <li>使用我们少数可用的大小调整实用程序来快速设置卡片的宽度。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card w-75">
                <div class="card-body">
                    <h5 class="card-title">卡标题</h5>
                    <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                    <a href="#" class="btn btn-primary">按钮</a>
                </div>
            </div>

            <div class="card w-50">
                <div class="card-body">
                    <h5 class="card-title">卡标题</h5>
                    <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                    <a href="#" class="btn btn-primary">按钮</a>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>使用自定义CSS</li>
                                            <li>在样式表中或作为内联样式使用自定义CSS来设置宽度。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">特殊标题处理</h5>
                    <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                    <a href="#" class="btn btn-primary">去某地</a>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>文字对齐</li>
                                            <li>您可以使用我们的文本对齐类快速更改任何卡的整体或特定部分的文本对齐方式。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
<div class="row">
    <div class="col">
        <div class="card" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title">特殊标题处理</h5>
                <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                <a href="#" class="btn btn-primary">去某地</a>
            </div>
        </div>

        <div class="card text-center" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title">特殊标题处理</h5>
                <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                <a href="#" class="btn btn-primary">去某地</a>
            </div>
        </div>

        <div class="card text-right" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title">特殊标题处理</h5>
                <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                <a href="#" class="btn btn-primary">去某地</a>
            </div>
        </div>
    </div>
</div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>导航</li>
                                            <li>使用Bootstrap的nav组件在卡的头（或块）中添加一些导航。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card text-center">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Active</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <h5 class="card-title">特殊标题处理</h5>
                    <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                    <a href="#" class="btn btn-primary">去某地</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card text-center">
                <div class="card-header">
                    <ul class="nav nav-pills card-header-pills">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Active</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <h5 class="card-title">特殊标题处理</h5>
                    <p class="card-text">在下面提供支持文字，自然而然地引入了其他内容。</p>
                    <a href="#" class="btn btn-primary">去某地</a>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>图像帽</li>
                                            <li>与页眉和页脚相似，卡片可以包含顶部和底部的“图像上限”，即图像顶部或底部的图像。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card mb-3">
                <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">卡标题</h5>
                    <p class="card-text">这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                    <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">卡标题</h5>
                    <p class="card-text">这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                    <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                </div>
                <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>图像叠加</li>
                                            <li>将图像变成卡片背景并覆盖卡片的文本。根据图像，您可能需要也可能不需要其他样式或实用程序。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card bg-dark text-white">
                <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img" alt="...">
                <div class="card-img-overlay">
                    <h5 class="card-title">卡标题</h5>
                    <p class="card-text">这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                    <p class="card-text">最近更新3分钟前</p>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>卧式</li>
                                            <li>结合使用网格和实用程序类，可以以移动友好且响应迅速的方式使卡水平放置。在下面的示例中，我们使用删除网格装订线，.no-gutters并使用.col-md-*类使卡在md断点处水平。根据您的卡内容，可能需要进一步调整。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card mb-3" style="max-width: 540px;">
                <div class="row no-gutters">
                    <div class="col-md-4">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img" alt="...">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                            <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>卡片样式</li>
                                            <li>卡片包含用于自定义背景，边框和颜色的各种选项。
                                            </li>
                                            <li>背景和颜色</li>
                                            <li>使用文本和背景实用程序来更改卡的外观。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body">
                    <h5 class="card-title">主卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body">
                    <h5 class="card-title">副卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card text-white bg-success mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body">
                    <h5 class="card-title">成功卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body">
                    <h5 class="card-title">危险卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body">
                    <h5 class="card-title">警告卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body">
                    <h5 class="card-title">信息卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card bg-light mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body">
                    <h5 class="card-title">亮卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body">
                    <h5 class="card-title">暗卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>边框</li>
                                            <li>使用边界实用程序仅更改border-color卡的。请注意，您可以将.text-{color}类放在父级.card或卡内容的子集中，如下所示。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card border-primary mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body text-primary">
                    <h5 class="card-title">主卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card border-secondary mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body text-secondary">
                    <h5 class="card-title">副卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card border-success mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body text-success">
                    <h5 class="card-title">成功卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card border-danger mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body text-danger">
                    <h5 class="card-title">危险卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card border-warning mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body text-warning">
                    <h5 class="card-title">警告卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card border-info mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body text-info">
                    <h5 class="card-title">信息卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card border-light mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body">
                    <h5 class="card-title">亮卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
            <div class="card border-dark mb-3" style="max-width: 18rem;">
                <div class="card-header">头部</div>
                <div class="card-body text-dark">
                    <h5 class="card-title">暗卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>Mixins实用程序</li>
                                            <li>您还可以更改卡上的页眉和页脚所需的边界，甚至删除其background-color用.bg-transparent。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card border-success mb-3" style="max-width: 18rem;">
                <div class="card-header bg-transparent border-success">头部</div>
                <div class="card-body text-success">
                    <h5 class="card-title">成功卡标题</h5>
                    <p class="card-text">一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。</p>
                </div>
                <div class="card-footer bg-transparent border-success">页脚</div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>卡布局</li>
                                            <li>除了在卡片中设置内容的样式外，Bootstrap还提供了一些用于布置一系列卡片的选项。目前，这些布局选项尚未响应。
                                            </li>
                                            <li>卡组</li>
                                            <li>使用卡组将卡呈现为具有相等宽度和高度列的单个附加元素。卡组从堆叠开始，并用于display: flex;从sm断点开始以统一的尺寸连接。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card-group">
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                        <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                    </div>
                </div>
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">该卡片下方具有辅助文字，可以自然地引入其他内容。</p>
                        <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                    </div>
                </div>
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此卡片的内容比第一个显示相同高度动作的卡片更长。</p>
                        <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>卡套</li>
                                            <li>需要一组彼此不连接的宽度和高度相等的卡吗？使用卡片组。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card-deck">
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                        <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                    </div>
                </div>
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">该卡片下方具有辅助文字，可以自然地引入其他内容。</p>
                        <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                    </div>
                </div>
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此卡片的内容比第一个显示相同高度动作的卡片更长。</p>
                        <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card-deck">
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">最近更新3分钟前</small>
                    </div>
                </div>
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">该卡片下方具有辅助文字，可以自然地引入其他内容。</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">最近更新3分钟前</small>
                    </div>
                </div>
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">这是一种较宽的卡片，带有下面的支持文字，可以自然地引入其他内容。此卡片的内容比第一个显示相同高度动作的卡片更长。</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">最近更新3分钟前</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>



                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>网格卡</li>
                                            <li>使用Bootstrap网格系统及其.row-cols类来控制每行显示多少个网格列（卡周围）。例如，这里.row-cols-1将卡片布置在一列上，然后.row-cols-md-2从中等的断点开始，将四张卡片分成相等的宽度，跨多行。
                                            </li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="row row-cols-1 row-cols-md-2">
                <div class="col mb-4">
                    <div class="card">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                        </div>
                    </div>
                </div>
                <div class="col mb-4">
                    <div class="card">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                        </div>
                    </div>
                </div>
                <div class="col mb-4">
                    <div class="card">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。</p>
                        </div>
                    </div>
                </div>
                <div class="col mb-4">
                    <div class="card">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="row row-cols-1 row-cols-md-3">
                <div class="col mb-4">
                    <div class="card">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                        </div>
                    </div>
                </div>
                <div class="col mb-4">
                    <div class="card">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                        </div>
                    </div>
                </div>
                <div class="col mb-4">
                    <div class="card">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。</p>
                        </div>
                    </div>
                </div>
                <div class="col mb-4">
                    <div class="card">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="row row-cols-1 row-cols-md-3">
                <div class="col mb-4">
                    <div class="card h-100">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                        </div>
                    </div>
                </div>
                <div class="col mb-4">
                    <div class="card h-100">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张短牌。</p>
                        </div>
                    </div>
                </div>
                <div class="col mb-4">
                    <div class="card h-100">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。</p>
                        </div>
                    </div>
                </div>
                <div class="col mb-4">
                    <div class="card h-100">
                        <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">卡标题</h5>
                            <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li>卡列</li>
                                            <li>只需将CSS包裹在卡片中，就可以将其组织成类似Masonry的列.card-columns。卡是使用CSS column属性而不是flexbox构建的，以便于对齐。卡的排列顺序是从上到下，从左到右。
                                            </li>
                                            <li><b>小心！</b>您使用信用卡栏的里程可能会有所不同。为防止卡跨列断裂，我们必须将其设置display: inline-block为column-break-inside: avoid还不是防弹解决方案。</li>
                                        </ol>
                                    </div>
                                </div>
<div class="code-source">
    <div class="row">
        <div class="col">
            <div class="card-columns">
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">换行的卡片标题</h5>
                        <p class="card-text">这是一张较长的卡片，带有以下支持文字，可以自然地引入其他内容。此内容要长一点。</p>
                    </div>
                </div>
                <div class="card p-3">
                    <blockquote class="blockquote mb-0 card-body">
                        <p>Lorem ipsum dolor坐下来，一直保持良好的状态。整体从正面布置。</p>
                        <footer class="blockquote-footer">
                            <small class="text-muted">
                                著名的人 <cite title="Source Title">来源标题中</cite>
                            </small>
                        </footer>
                    </blockquote>
                </div>
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">该卡片下方具有辅助文字，可以自然地引入其他内容。</p>
                        <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                    </div>
                </div>
                <div class="card bg-primary text-white text-center p-3">
                    <blockquote class="blockquote mb-0">
                        <p>Lorem ipsum dolor坐下来，一直保持良好的状态。整个躺在那里。</p>
                        <footer class="blockquote-footer text-white">
                            <small>
                                著名的人 <cite title="Source Title">来源标题中</cite>
                            </small>
                        </footer>
                    </blockquote>
                </div>
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">这张卡的标题为常规标题，下面有一段简短的文字。</p>
                        <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                    </div>
                </div>
                <div class="card">
                    <img src="{{ asset('/static/images/cat.jpg') }}" class="card-img-top" alt="...">
                </div>
                <div class="card p-3 text-right">
                    <blockquote class="blockquote mb-0">
                        <p>Lorem ipsum dolor坐下来，一直保持良好的状态。整体从正面布置。</p>
                        <footer class="blockquote-footer">
                            <small class="text-muted">
                                著名的人 <cite title="Source Title">来源标题中</cite>
                            </small>
                        </footer>
                    </blockquote>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">卡标题</h5>
                        <p class="card-text">这是另一张下方带有标题和支持文字的卡片。此卡还包含一些其他内容，使其整体上略高</p>
                        <p class="card-text"><small class="text-muted">最近更新3分钟前</small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                                <!--/code-source-->

                                <div class="row">
                                    <div class="col">
                                        <p>卡列也可以扩展并使用一些其他代码进行自定义。下面显示的是.card-columns使用与我们使用的相同CSS（即CSS列）的类的扩展，以生成一组用于更改列数的响应层。</p>
                                    </div>
                                </div>
<div class="language-scss" data-lang="scss">
    <div class="row">
        <div class="col">
            <code class="language-scss" data-lang="scss">
                .card-columns {
                    `@`include media-breakpoint-only(lg) {
                        column-count: 4;
                    }
                    `@`include media-breakpoint-only(xl) {
                        column-count: 5;
                    }
                }
            </code>
        </div>
    </div>
</div>



                            </div>
                        </div>



                    </div>
                    <!--/demo-code-->
                </div>
            </div>
        </div>
        <!--/row-->


    </div>
@endsection
@section('js')
    <script>
        (function () {
            // page
            var Page = {
                init: function () {
                    // App.toast('1111')
                    this.bind()
                },
                bind: function () {
                    var self = this
                }
            }

            // ready
            $(function () {
                Page.init()
            });
        }());
    </script>
@endsection
